<!DOCTYPE html>
<html>
<head>
<title>首页</title> #parse("sys/header.html")
<style type="text/css">
           
            .class1{
                width: 20px;
                height: 20px;
                float: left;
                margin-right: 20px;
            }
            
        </style>
</head>
<body>
<div style="width:100%;height:800px">
	
     <div style="float:left;width:100%;height:5%;overflow-y:scroll;">
	 <div class="col-md-2" id="totalcount">
        	   </div>
	<div id="grouplist">
        	    
        </div>	 
</div>
    


     <div style="float:left;width:70%;height:95%" id="areaMap">

<svg id="map" xmlns="http://www.w3.org/2000/svg" version="1.1"
			width="100%" height="100%" >
			
			 <image  x="0" y="0" width="100%" 
   xlink:href="${rc.contextPath}/images/map2.svg" /> 
   </svg>
 
     </div>
     <div style="float:right;width:29%">
      <div style="text-align:center"><b>实时人员列表</b></div>
     <input type="text" id="currentContent"/>
     <input type="button" value="人员" id="btn_currentName"/>
      <input type="button" value="地点" id="btn_currentStation"/>
            <input type="button" value="返回" id="btn_currentBack"/>
      <div style="width:100%;height:150px; overflow-y:scroll; border:1px solid;">
<table border="1"  style="width:100%;" id="currentPerson">

</table>
</div>

         
              <div style="text-align:center"><b>越界报警列表</b></div>
     <input type="text" id="crossContent"/>
     <input type="button" value="人员" id="btn_crossName"/>
      <input type="button" value="地点" id="btn_crossStation"/>
        <input type="button" value="返回" id="btn_crossBack"/>
     
       <div style="width:100%;height:150px;overflow-y:scroll;border:1px solid;">
<table border="1"  style="width:100%;" id="crossPerson">


</table>
</div>

                       
              <div style="text-align:center"><b>离岗报警列表</b></div>
     <input type="text" id="disContent" />
     <input type="button" value="人员" id="btn_disName"/>
      <input type="button" value="地点" id="btn_disStation"/>
      <input type="button" value="返回" id="btn_disBack"/>
      
        <div style="width:100%;height:150px;overflow-y:scroll;border:1px solid;">
<table border="1"  style="width:100%;" id="disPerson">


</table>
</div>
     </div>
</div>

	<!-- <script src="${rc.contextPath}/js/sys/config.js?_${date.systemTime}"></script> -->
	<script type="text/javascript" language="javascript"> 
	//实时人员全局变量
	var currentMaplist=new Array();
	var currentName;
    var currentStation;
    var currentType;
   
    var grouplist=new Array();
    var totalcount=0;
	//越界报警全局变量
	var crossMaplist=new Array();
	var crossName;
    var crossStation;
    var crossType;
    
    
    //离岗报警全局变量 
    var disMaplist=new Array();
	var disName;
    var disStation;
    var disType;
   
    $(document).ready(function () {  
    	//每五秒执行函数
    	startCurrentRequest();
    	startCrossRequest();
    	startDisRequest();
     setInterval(startCurrentRequest, 5000); 
      setInterval(startCrossRequest, 5000);
      setInterval(startDisRequest, 5000);
        
    });
	//执行获取实时人员位置
    function startCurrentRequest(){
		
    	
     	 $.get("../map_index/list", function(r){
          currentMaplist=r.indexlist;
          grouplist=r.listgroup;
          totalcount=r.totalcount;
         
    	  
     	 var map=document.getElementById("map");
     //清空map内容
     	 $("#map").empty();
     //再加回地图
     	 map.innerHTML='<image  x="0" y="0" width="100%" xlink:href="${rc.contextPath}/images/map2.svg" />';
     	
     	 var c=document.getElementById("areaMap");
          $.each(currentMaplist,function(index,item){
         	 //获取div的offsetWidth,对加入的坐标进行校正
           	 var yuan_x=item.positionX;
           	 var yuan_y=item.positionY;
         		var w = c.offsetWidth;
         		var x = (w*yuan_x)/1800.0;
         		var h = w/2.0;
         		var y = (h*yuan_y)/900.0;
         	//动态创建svg的circle
         		var c1= document.createElementNS("http://www.w3.org/2000/svg", "circle");
         		  c1.setAttribute("id", item.codeTag);  
         		c1.setAttribute("cx", x);  
            		c1.setAttribute("cy", y); 
            	   c1.setAttribute("fill", item.rgb);
           
            	c1.setAttribute("r", item.r);
            	//动态创建circle的子元素title
            		var title = document.createElementNS("http://www.w3.org/2000/svg","title");
            			var p=document.createElement("p");
            			p.innerHTML='<b>标签编号：'+item.codeTag+'</b><br/><b>名称：'+item.namePersonnel+'</b>';
            			title.appendChild(p);
            			c1.appendChild(title);
            			map.appendChild(c1);
        	 });
          //点击人员过滤不属于查询的人员
         var btn_currentName=document.getElementById("btn_currentName");
         btn_currentName.onclick=function(){
         	 var new_currentMaplist=new Array();
         	 currentName=$("#currentContent").val();
         	 currentType="1";
         	 console.log(currentName);
         	  $.each(currentMaplist,function(index,item){
         		  var t=item.namePersonnel.indexOf(currentName);
                 	 if(t>=0){
                 		 new_currentMaplist.push(item);
                 	 }
                  });
                  var html='<tr >  <th>地点</th><th>人员</th></tr>';
                  $.each(new_currentMaplist,function(index,item){
                 	
                 	 html+=' <tr onclick="onclickedperson('+item.codeTag+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td></tr>';
                 
                  });
                  $("#currentPerson").html(html);
                 
                 
          };
          // //点击地点过滤不属于查询的站点
           var btn_currentStation=document.getElementById("btn_currentStation");
           btn_currentStation.onclick=function(){
         	 var new_currentMaplist=new Array();
         	 currentStation=$("#currentContent").val();
         	 currentType="2";
         	 console.log(currentStation);
        	  $.each(currentMaplist,function(index,item){
        		var t=item.nameStation.indexOf(currentStation);
              	 if(t>=0){
              		 new_currentMaplist.push(item);
              	 }
               });
               var html='<tr >  <th>地点</th><th>人员</th></tr>';
               $.each(new_currentMaplist,function(index,item){
              	
              	 html+=' <tr onclick="onclickedperson('+item.codeTag+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td></tr>';
              
               });
               $("#currentPerson").html(html);
       	  
            
              
          };
          //点击返回
          $("#btn_currentBack").click(function(){
         	
         	 currentType="0";
           	  var html='<tr >  <th>地点</th><th>人员</th></tr>';
               $.each(currentMaplist,function(index,item){
              	
              	 html+=' <tr onclick="onclickedperson('+item.codeTag+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td></tr>';
              
               });
               $("#currentPerson").html(html);
              
          });
          //通过两个全局变量判断所点击按钮的list
          if(currentName&&currentType=="1"){
         	 console.log(currentName);
         	 var new_currentMaplist=new Array();
        	  $.each(currentMaplist,function(index,item){
        		  var t=item.namePersonnel.indexOf(currentName);
                	 if(t>=0){
                		 new_currentMaplist.push(item);
                	 }
                 });
                 var html='<tr >  <th>地点</th><th>人员</th></tr>';
                 $.each(new_currentMaplist,function(index,item){
                	
                	 html+=' <tr onclick="onclickedperson('+item.codeTag+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td></tr>';
                
                 });
                 $("#currentPerson").html(html);
          }
      else if(currentStation&&currentType=="2"){
     	 console.log(currentStation);
     	 var new_currentMaplist=new Array();
     	  $.each(currentMaplist,function(index,item){
        		var t=item.nameStation.indexOf(currentStation);
              	 if(t>=0){
              		 new_currentMaplist.push(item);
              	 }
               });
               var html='<tr >  <th>地点</th><th>人员</th></tr>';
               $.each(new_currentMaplist,function(index,item){
              	
              	 html+=' <tr onclick="onclickedperson('+item.codeTag+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td></tr>';
              
               });
               $("#currentPerson").html(html);
       	  
       	
       	  
         }
       
       else{
    
     	  var html='<tr >  <th>地点</th><th>人员</th></tr>';
           $.each(currentMaplist,function(index,item){
          	
          	 html+=' <tr onclick="onclickedperson('+item.codeTag+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td></tr>';
          
           });
           $("#currentPerson").html(html);
  
       }
          
          //显示实时人员总人数
     	  $("#totalcount").html('实时在线总人数：'+totalcount+'人');
         
     	 //显示分组显示人数和颜色
      	 var html='';
      	   $.each(grouplist,function(index,item){
      		   html+=' <div class="col-md-2">'
      	        	 
             	 +'  <div  class="class1" style="background-color:'+item.color+'">'

             	 +' </div>'+item.groupName+'：'+item.count+'人'	
             +' </div>';
      	   });
      	   $("#grouplist").html(html);
        });
     	 
     	
     	   
     	
     
    }
	//越界报警列表
	function startCrossRequest(){
		$.get("../map_index/crosslist", function(r){
	          crossMaplist=r.crosslist;
	          //点击人员过滤不属于查询的人员
	          var btn_crossName=document.getElementById("btn_crossName");
	          btn_crossName.onclick=function(){
	            	  var new_crossMaplist=new Array();
	            	crossName=$("#crossContent").val();
	            	crossType="1";
	            	
	           	 console.log(crossName);
	           	  $.each(crossMaplist,function(index,item){
	           		  var t=item.namePersonnel.indexOf(crossName);
	                   	 if(t>=0){
	                   		 new_crossMaplist.push(item);
	                   	 }
	                    });
	     		 var html='<tr >  <th>地点</th><th>人员</th><th>触发时间</th></tr>';
	             $.each(new_crossMaplist,function(index,item){
	            	
	            	 html+=' <tr onclick="onclicked('+item.r+','+item.positionX+','+item.positionY+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td><td>'+item.begintime+'</td></tr>';
	            
	             });
	             var crossPerson=document.getElementById("crossPerson");
	             crossPerson.innerHTML=html;
	        
	            
	            };
	            // //点击地点过滤不属于查询的站点
	            var btn_crossStation=document.getElementById("btn_crossStation");
	            btn_crossStation.onclick=function(){
	            	  var new_crossMaplist=new Array();
	            	crossStation=$("#crossContent").val();
	            	crossType="2";
	            	
	           	 console.log(crossStation);
	          	  $.each(crossMaplist,function(index,item){
	          		var t=item.nameStation.indexOf(crossStation);
	                	 if(t>=0){
	                		 new_crossMaplist.push(item);
	                	 }
	                 });
	          	 
	          	 var html='<tr >  <th>地点</th><th>人员</th><th>触发时间</th></tr>';
	             $.each(new_crossMaplist,function(index,item){
	            	
	            	 html+=' <tr onclick="onclicked('+item.r+','+item.positionX+','+item.positionY+')")"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td><td>'+item.begintime+'</td></tr>';
	            
	             });
	             
	             var crossPerson=document.getElementById("crossPerson");
	             crossPerson.innerHTML=html;
	              	  
	             
	            };
	            //点击返回
	            $("#btn_crossBack").click(function(){
	           	
	            	crossType="0";
	            	var html='<tr >  <th>地点</th><th>人员</th><th>触发时间</th></tr>';
	                $.each(crossMaplist,function(index,item){
	               	
	               	 html+=' <tr onclick="onclicked('+item.r+','+item.positionX+','+item.positionY+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td><td>'+item.begintime+'</td></tr>';
	               
	                });
	                $("#crossPerson").html(html);
	               
	            });
	            
	            //通过两个全局变量判断所点击按钮的list
	            if(crossName&&crossType=="1"){
	            	  var new_crossMaplist=new Array();
	          	  $.each(crossMaplist,function(index,item){
	          		  var t=item.namePersonnel.indexOf(crossName);
	                  	 if(t>=0){
	                  		 new_crossMaplist.push(item);
	                  	 }
	                   });
	          	var html='<tr >  <th>地点</th><th>人员</th><th>触发时间</th></tr>';
	            $.each(new_crossMaplist,function(index,item){
	           	
	           	 html+=' <tr onclick="onclicked('+item.r+','+item.positionX+','+item.positionY+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td><td>'+item.begintime+'</td></tr>';
	           
	            });
	            $("#crossPerson").html(html);
	            }
	        else if(crossStation&&crossType=="2"){
	        	  var new_crossMaplist=new Array();
	       	  $.each(crossMaplist,function(index,item){
	          		var t=item.nameStation.indexOf(crossStation);
	                	 if(t>=0){
	                		 new_crossMaplist.push(item);
	                	 }
	                 });
	      	var html='<tr >  <th>地点</th><th>人员</th><th>触发时间</th></tr>';
	        $.each(new_crossMaplist,function(index,item){
	       	
	       	 html+=' <tr onclick="onclicked('+item.r+','+item.positionX+','+item.positionY+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td><td>'+item.begintime+'</td></tr>';
	       
	        });
	        $("#crossPerson").html(html);
	         	  
	         	
	         	  
	           }
	         
	         else{
	      
	        		var html='<tr >  <th>地点</th><th>人员</th><th>触发时间</th></tr>';
	                $.each(crossMaplist,function(index,item){
	               	
	               	 html+=' <tr onclick="onclicked('+item.r+','+item.positionX+','+item.positionY+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td><td>'+item.begintime+'</td></tr>';
	               
	                });
	                $("#crossPerson").html(html);

	         }
	        }); 
	  

	}
	
   //离岗报警
   
	function startDisRequest(){
		$.get("../map_index/dislist", function(r){
	          disMaplist=r.dislist;
	          //点击人员过滤不属于查询的人员
	          var btn_disName=document.getElementById("btn_disName");
	          btn_disName.onclick=function(){
	            	  var new_disMaplist=new Array();
	            	disName=$("#disContent").val();
	            	disType="1";
	            	
	           	 console.log(disName);
	           	  $.each(disMaplist,function(index,item){
	           		  var t=item.namePersonnel.indexOf(disName);
	                   	 if(t>=0){
	                   		 new_disMaplist.push(item);
	                   	 }
	                    });
	     		 var html='<tr >  <th>地点</th><th>人员</th><th>触发时间</th></tr>';
	             $.each(new_disMaplist,function(index,item){
	            	
	             	 html+=' <tr onclick="onclicked('+item.r+','+item.positionX+','+item.positionY+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td><td>'+item.triggertime+'</td></tr>';
	            
	             });
	             var disPerson=document.getElementById("disPerson");
	             disPerson.innerHTML=html;
	        
	            
	            };
	            // //点击地点过滤不属于查询的站点
	            var btn_disStation=document.getElementById("btn_disStation");
	            btn_disStation.onclick=function(){
	            	  var new_disMaplist=new Array();
	            	disStation=$("#disContent").val();
	            	disType="2";
	            	
	           	 console.log(disStation);
	          	  $.each(disMaplist,function(index,item){
	          		var t=item.nameStation.indexOf(disStation);
	                	 if(t>=0){
	                		 new_disMaplist.push(item);
	                	 }
	                 });
	          	 
	          	 var html='<tr >  <th>地点</th><th>人员</th><th>触发时间</th></tr>';
	             $.each(new_disMaplist,function(index,item){
	            	
	             	 html+=' <tr onclick="onclicked('+item.r+','+item.positionX+','+item.positionY+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td><td>'+item.triggertime+'</td></tr>';
	            
	             });
	             
	             var disPerson=document.getElementById("disPerson");
	             disPerson.innerHTML=html;
	              	  
	             
	            };
	            //点击返回
	            $("#btn_disBack").click(function(){
	           	
	            	disType="0";
	            	var html='<tr >  <th>地点</th><th>人员</th><th>触发时间</th></tr>';
	                $.each(disMaplist,function(index,item){
	               	
	                	 html+=' <tr onclick="onclicked('+item.r+','+item.positionX+','+item.positionY+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td><td>'+item.triggertime+'</td></tr>';
	               
	                });
	                $("#disPerson").html(html);
	               
	            });
	            
	            //通过两个全局变量判断所点击按钮的list
	            if(disName&&disType=="1"){
	            	  var new_disMaplist=new Array();
	          	  $.each(disMaplist,function(index,item){
	          		  var t=item.namePersonnel.indexOf(disName);
	                  	 if(t>=0){
	                  		 new_disMaplist.push(item);
	                  	 }
	                   });
	          	var html='<tr >  <th>地点</th><th>人员</th><th>触发时间</th></tr>';
	            $.each(new_disMaplist,function(index,item){
	           	
	             	 html+=' <tr onclick="onclicked('+item.r+','+item.positionX+','+item.positionY+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td><td>'+item.triggertime+'</td></tr>';
	           
	            });
	            $("#disPerson").html(html);
	            }
	        else if(disStation&&disType=="2"){
	        	  var new_disMaplist=new Array();
	       	  $.each(disMaplist,function(index,item){
	          		var t=item.nameStation.indexOf(disStation);
	                	 if(t>=0){
	                		 new_disMaplist.push(item);
	                	 }
	                 });
	      	var html='<tr >  <th>地点</th><th>人员</th><th>触发时间</th></tr>';
	        $.each(new_disMaplist,function(index,item){
	          	 html+=' <tr onclick="onclicked('+item.r+','+item.positionX+','+item.positionY+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td><td>'+item.triggertime+'</td></tr>';

	       
	        });
	        $("#disPerson").html(html);
	         	  
	         	
	         	  
	           }
	         
	         else{
	      
	        		var html='<tr >  <th>地点</th><th>人员</th><th>触发时间</th></tr>';
	                $.each(disMaplist,function(index,item){
	          
	                	
	               	 html+=' <tr onclick="onclicked('+item.r+','+item.positionX+','+item.positionY+')"><td>'+item.nameStation+'</td><td>'+item.namePersonnel+'</td><td>'+item.triggertime+'</td></tr>';
	               
	                });
	                $("#disPerson").html(html);

	         }
	        }); 
	   

	}
	//越界和离岗点击放大   
   function onclicked(r,yuan_x,yuan_y){


	   var map=document.getElementById("map");
	  	 var c=document.getElementById("areaMap");
       
        	
        		var w = c.offsetWidth;
        		var x = (w*yuan_x)/1800.0;
        		var h = w/2.0;
        		var y = (h*yuan_y)/900.0;
        	//动态创建svg的circle
        		var c1= document.createElementNS("http://www.w3.org/2000/svg", "circle");
        		
        		c1.setAttribute("cx", x);  
           		c1.setAttribute("cy", y); 
           	   c1.setAttribute("fill", "rgb(0,0,0)");
         
           	c1.setAttribute("r",r);
            setTimeout(function(){
				
              	c1.setAttribute("r","5");
			 },500);
           			map.appendChild(c1);
     
	}
   //实时列表点击放大
	function onclickedperson(id){
	
	
		var one=document.getElementById(id);

				one.style.r="20";
			 setTimeout(function(){
				
				 one.style.r="5";
			 },500);
		
	}
</script>  
</body>
</html>